{% extends "bootstrap/base.html" %}

{% block title %}
{% if title %}
{{ title }} - 心动
{% else %}
Welcome to 心动
{% endif %}
{% endblock %}

{% block styles %}
{{ super() }}
<style>
    .navbar-center {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .navbar-nav {
      display: flex;
      flex-wrap: wrap; /* 允许项目换行 */
      justify-content: center; /* 水平居中对齐 */
    }

    .navbar-nav > li {
      flex: 1 1 auto; /* 使每个列表项都可以伸缩 */
      text-align: center; /* 文本居中 */
    }

    /* 当屏幕宽度小于某个值时（例如768px），让导航项堆叠显示 */
    @media (max-width: 768px) {
      .navbar-nav > li {
        flex-basis: 100%; /* 每个列表项占据一行 */
      }
    }
</style>
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-nav-wrapper" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="{{ url_for('main.index') }}">心动Home</a></li>
        <li><a href="{{ url_for('auth.registration') }}">用户界面--待开发</a></li>
        <!-- 添加更多导航项 -->
      </ul>
    </div>
  </div>
</nav>
{% endblock %}

{% block content %}
<div class="container text-center">
    {% block app_content %}{% endblock %}
</div>
{% endblock %}